<template>
	<view style="height: 100vh; background-color: antiquewhite">
		<ComCharts ref="child" :ChartOption="option" ChartStyle="height:300px;padding:100px 20px 0px" option="option" />
		<button @click="clickBtn" style="margin: 0 20px">更新数据</button>
	</view>
</template>
<script>
import ComCharts from '../components/ComCharts.vue';
export default {
	components: {
		ComCharts: ComCharts
	},
	data: () => {
		return {
			option: ''
		};
	},
	methods: {
		// 动态更新数据
		clickBtn() {
			let dyArr = [];
			for (let i = 0; i < 5; i++) {
				dyArr.push(Math.floor(Math.random() * 21));
			}

			this.option = {
				title: {
					text: '示例'
				},
				tooltip: {},
				legend: {
					data: ['销量']
				},
				xAxis: {
					data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋']
				},
				yAxis: {},
				series: [
					{
						name: '销量',
						type: 'bar',
						data: dyArr
					}
				]
			};
			this.$refs.child.changeOption(this.option)
		}
	}
};
</script>
